import { View } from '@tarojs/components';
import * as React from "react";
import { DottedLineProps } from '../../types/DottedLine';



export const DottedLine: React.FC<Partial<DottedLineProps>>

    = props => {
        const {
            horizontal = true,
            dottedColor,
            dottedCount = 200,
            ...rest
        } = props
        const arrs = Array.from({ length: dottedCount }, (v, k) => k)
        const seed = React.useRef(Math.random())
        return (
            <View style={{ ...styles.container, flexDirection: horizontal ? 'row' : 'column' , ...rest.style as any }}>
                {
                    arrs.map((item, index) => {
                        return <View
                            key={`dotted-seed-${seed.current}-${index}`}
                            style={{
                                ...(horizontal ? styles.dotted_horizontal : styles.dotted_vertical),
                                ...(dottedColor && { backgroundColor: dottedColor }),
                            }} />
                    })
                }
            </View>
        )

    }





const styles: Record<string, React.CSSProperties> = {
    container: {
        display: 'flex',
        flexGrow: 1,
        // width:'100%',
        // height:'2px',
        overflow: 'hidden',
        flexDirection: 'row',
        flexWrap: 'nowrap',
    },

    dotted_horizontal: {
        flexGrow: 0,
        flexShrink:0,
        width: '4px',
        height: '1px',
        marginRight: '4px',
        backgroundColor: '#cccccc',
    },
    dotted_vertical: {
        flexGrow: 0,
        flexShrink: 0,
        width: '1px',
        height: '4px',
        marginBottom: '4px',
        backgroundColor: '#cccccc',
    }

}